<template>
  <div>
    <el-dialog
      title="用户信息"
      :visible="userDialogVisitable"
      @close="closeDialog"
      center
      width="70%"
    >
      <div>
        <el-row>
          <div>
            <el-form :inline="true" :model="formInline" label-width="100px">
              <el-form-item label="查询条件" prop="districtId">
              </el-form-item>
              <el-form-item label="">
                <el-input placeholder="姓名/用户账号/电话/全拼" v-model="formInline.username"
                          class="input-with-select" v-on:keyup.enter="searchUser" @blur="searchUser" clearable>
                  <el-button slot="append" icon="el-icon-search" @click="searchUser">搜索</el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-table
            ref="multipleTable"
            :data="userList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              :filter-multiple="false">
            </el-table-column>
            <el-table-column
              label="姓名"
              >
              <template slot-scope="scope">{{ scope.row.username }}</template>
            </el-table-column>
            <el-table-column
              prop="account"
              label="帐号"
              >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" center>
        <el-button @click="userDialogVisitable = false">取 消</el-button>
        <el-button type="primary" v-on:click="choseUser">选 取</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ChoseUser",
    data() {
      return {
        currentPage: 1,
        totalCount: 0,
        pageSize: 10,
        formInline: {
          username: '',
          companyId: 'xtgj',
          districtId: 'hq'
        },
        userDialogVisitable:false,
        userList: [
          {
            id:'2019001',
            username:'小明',
            account:'xiaoMing'
          },
          {
            id:'2019002',
            username:'小华',
            account:'xiaoHua'
          },
          {
            id:'2019003',
            username:'小红',
            account:'xiaoHong'
          }
        ],
        multipleSelection: [],
        districtOptions: [],
        companyOptions: []
      };
    },
    methods: {
      loadData(){
        //impl by self
      },
      toggleSelection: function (rows) {
        if (rows) {
          rows.forEach(function (row) {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange: function (val) {
        this.multipleSelection = val;
        if (val.length > 1) {
          this.$refs.multipleTable.toggleRowSelection(val[0]);
        }
      },
      choseUser: function () {
        if (this.multipleSelection.length !== 1) {
          this.$message('请选择一个用户');
          return;

        }
        //回调父组件接口
        this.$emit('user-choice', this.multipleSelection[0]);

        //关闭modal
        this.changeVisiable();
      },
      changeVisiable: function () {
        this.userDialogVisitable = !this.userDialogVisitable
      },
      searchUser: function () {
        var that = this;
        var param = {
          username: that.formInline.username,
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          companyId: that.formInline.companyId
        };

        this.loadData(that, param);
      },
      closeDialog: function () {
        this.userDialogVisitable = false
      },
      districtChange: function (value) {
        var app = this;
        if (!value) {
          this.companyOptions = [];
          this.formInline.companyId = '';
        } else {

        }
      },
      handleSizeChange: function (val) {
        var that = this;
        this.pageSize = val;
        this.currentPage = 1;
        //重新加载数据
        var data = {
          pageSize: val,
          pageNum: 1,
          username: that.formInline.username,
          companyId: that.formInline.companyId
        };
        this.loadData(this, data);
      },
      handleCurrentChange: function (val) {
        this.currentPage = val;
        //重新加载数据
        var data = {
          pageSize: this.pageSize,
          pageNum: val,
          username: this.formInline.username,
          companyId: this.formInline.companyId
        };
        this.loadData(this, data);
      }

    }
  }
</script>

<style scoped>

</style>
